<template>
  <div class="app-menu">
    <n-menu
      :options="props.menuOptions"
      :default-expanded-keys="props.defaultExpandedKeys"
      @update:value="menuHandleChange"
    />
  </div>
</template>

<script setup lang="js">
import { nextTick, watch } from 'vue'

const props = defineProps(['menuOptions', 'defaultExpandedKeys'])
const emits = defineEmits(['menuHandleChange'])

function menuHandleChange(key, item) {
  // 打印时 item 需要转 JSON.stringify(item)
  // console.log('Menu item Change:', JSON.stringify(item))
  emits('menuHandleChange', item)
}

watch(() => [props.menuOptions, props.defaultExpandedKeys], (newValue, oldValue) => {
  if (newValue[0] !== oldValue[0]) {
    nextTick(() => {
    
    })
  }
})
</script>

<style scoped lang="scss">
.app-menu {
  width: 100%;
  height: 100%;
  padding-top: 30px;
  border-right: 1px solid #f0f1f2;
}
</style>